import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  Switch,
  View,
  Modal,
  DeviceEventEmitter
} from 'react-native';
import { inject, observer } from 'mobx-react';


class ListItem extends React.Component {
    _goDetail = (id) => {
        this.props.navigate('NoticeDetail',{id: id, router: 'Notice' })
    }
    render(){
        const data = this.props.data;
        return (
           
            <View style={styles.listItem}>
                <View style={[styles.itemTItle,styles.c1]}>
                   <Text> {data.title}</Text>
                </View>
                <View style={styles.itemContent}>
                    <Text>&nbsp;&nbsp;&nbsp;&nbsp;{data.content.substr(0,18)}</Text>
                </View>
                <View style={styles.itemFooter}>
                    <Text style={styles.time}>{data.addtime}</Text>
                    <TouchableOpacity onPress={()=>this._goDetail(data.id)}>
                        <Text style={styles.c1}>查看详情 ></Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
        
    }
}
@inject((stores) => {
    return {
      loginStore: stores.rootStore.loginStore,
      uiStore: stores.rootStore.uiStore,
      myStore: stores.rootStore.myStore
    }
  })
@observer class NoticeListScreen extends React.Component {
    static navigationOptions = {
        title:'公告列表',
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
	}
    componentDidMount() {
      this.props.myStore.getNoticeList();
    };
    
    componentWillUnmount() {
        DeviceEventEmitter.emit('My', {id: 1});
	};
    render() {
        return (
            <View style={styles.container}>
                {
                    this.props.myStore.noticeList.map((item,index) => {
                        return <ListItem data={item} key={index + ''} navigate={this.props.navigation.navigate}></ListItem>
                    })
                }
            </View>
        );
    }
}
const styles = StyleSheet.create({
    listItem:{
        borderColor: '#101010',
        borderWidth: 1,
        borderRadius: 8,
        padding: 10,
        marginTop: 20,
        paddingTop: 0,
    },
    c1:{
        color:'#FF7F00',
        fontSize: 14,
    },
    itemTItle:{
        marginTop:10
    },
    itemContent:{
        fontSize: 14,
        color:'#B9B6B6',
        borderBottomColor: '#BBBBBB',
        borderBottomWidth: 1,
        padding: 10
    },
    itemFooter:{
        marginTop: 20,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    time:{
        color:'#999999'
    },
    container:{
        padding: 20
    }
});
export default NoticeListScreen;